<!-- 展示主要内容的找回密码界面 -->
<template>
  <div class="recovery-index">
    <Header>找回密码</Header>
    <section>
        <div class="recovery-tel">
          <input type="text" placeholder="请输入手机号" v-model="userTel" pattern="[0-9]*" >
        </div>
        <div class="recovery-code" >
          <input type="text" placeholder="请输入图像验证码" ref="logincode" v-model="inputCode" >
          <s-identify :identifyCode="identifyCode" :contentHeight="identifyHeight"></s-identify>
          <i class="iconfont" @click="refreshCode">&#xe615;</i>
        </div>
        <div class="recovery-message">
          <input type="text" v-model="userCode" placeholder="请输入短信验证码" pattern="[0-9]*" >
          <button @click="sendCode" :disabled="disabled">{{codeMsg}}</button>
        </div>
        <div class="recovery-btn" @click="next">下一步</div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from '@/components/login/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
//引入弹窗组件
import { Toast } from 'mint-ui';
//引入验证码组件
import SIdentify from "@/components/common/SIdentify.vue";
//引入axios的二次封装
import http from '@/common/api/request.js'

export default {
    name:'RecoveryIndex',
    components:{
        Header,
        Tabbar,
        SIdentify
    },
    data(){
        return{
            inputCode:'',//用户输入的图形验证码
            identifyCode: "",
            identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ",//绘制的随机数
            identifyHeight:'',
            userTel:'',//用户输入手机号
            //验证规则
            rules:{
              //手机号验证
              userTel:{
                rule:/^1\d{10}$/,
                msg:'手机号不能为空,且是11位数字'
              },
            },
            disabled:false,
            //点击获取验证码后的倒计时
            codeNum:6,
            //点击短信验证码后的按钮内容
            codeMsg:'获取短信验证码',
            //存储短信验证码
            code:'',
            //用户输出的短信验证码
            userCode:''
        }
    },
    methods: {       
      //刷新验证码  
      refreshCode() {
        this.identifyCode = "";
        this.makeCode(this.identifyCodes,4);
      },
      randomNum (min, max) {
        max = max + 1
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 随机生成验证码字符串
      makeCode (data, len) {
        for (let i = 0; i < len; i++) {
          this.identifyCode += data[this.randomNum(0, data.length - 1)]
        }
      },
      //获取短信验证码按钮
      sendCode(){
        //验证
        if(!this.validate('userTel'))return
        //请求获取短信验证码接口
        http.$axios({
          url:'/api/code',
          method:'POST',
          // 给后端传递的数据
          data:{
            phone:this.userTel
          }
        }).then(res=>{
          if(res.success){
            this.code = res.data
          }
          console.log(res)
        })
        //禁用按钮
        this.disabled=true
        //倒计时
        let timer = setInterval(()=>{
         this.codeNum--
         this.codeMsg= '重新发送还剩'+this.codeNum+'秒'
        },1000)
        //判断什么时候停止定时器
        setTimeout(()=>{
          clearInterval(timer)
          this.codeNum =6
          this.codeMsg='获取短信验证码'
          this.disabled= false
        },6000)

      },
      validate(key){
        let bool = true
        //如果验证手机号为错误格式
        if(!this.rules[key].rule.test(this[key])){
           //提示信息
           Toast(this.rules[key].msg);
            bool = false
            return false
        }
        return bool
      },
      next(){
        if(this.userCode == this.code&&this.userCode !== ''){
          //用户输入的短信验证码正确
          
          //判断输入的图形验证码是否正确
          if(this.inputCode ==this.identifyCode.toLowerCase()){
            //用户输入为全小写的情况 且验证码输入正确
            
             //发送请求 告诉后端 用户输入的手机号是否存在
            http.$axios({
              url:'/api/selectUser',
              method:'POST',
              // 给后端传递的数据
              data:{
                phone:this.userTel
              }
            }).then(res=>{
                //如果用户不存在
              if(!res.success){
                Toast(res.msg)
              }else{
                 //用户存在 下一步
                 this.$router.push({
                    name:'RecoveryBtn',
                    params:{
                      userTel:this.userTel
                    }
                 })
              }
            })
            
            
          }else if(this.inputCode == this.identifyCode.toUpperCase()){
            //用户输入为全大写的情况 且验证码输入正确
            
             //发送请求  告诉后端 用户输入的手机号是否存在
            http.$axios({
              url:'/api/selectUser',
              method:'POST',
              // 给后端传递的数据
              data:{
                phone:this.userTel
              }
            }).then(res=>{
              //如果用户不存在
              if(!res.success){
                Toast(res.msg)
              }else{
                 //用户存在 下一步
                 this.$router.push({
                    name:'RecoveryBtn',
                    params:{
                      userTel:this.userTel
                    }
                 })
              }
            })

            //跳转下一步
          }else{
            this.refreshCode()
            Toast('验证码错误')
            return
          }
          

        }else{
          Toast('短信验证码错误')

        }
      },
    //   //点击全选中输入框
    //   selectValue(e){
    //     e.currentTarget.select()
    //   }

    },
    created(){
      this.refreshCode()
      
    },
    mounted(){
        this.identifyHeight=this.$refs.logincode.offsetHeight
    },
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: (20 / @rootsize) 0;
  font-size: (14 / @rootsize);
  input{
    line-height: (44 / @rootsize);
    height: ( 44 / @rootsize);
    background-color: #fff;
    padding: 0 (20 / @rootsize);
  }
  .recovery-tel{
    padding: (15 / @rootsize) 0;
    width: (335 / @rootsize);
    input{
      width: 100%;
      border: 1px solid #ccc;
    }
  }
  .recovery-code{
    display: flex;
    align-items: center;
    margin: (15 / @rootsize) 0;
    width: (335 / @rootsize);
    border: 1px solid #ccc;
    input{
      flex: 1;
      border-right: 1px solid #ccc;
    }
    i{
      position: absolute;
      right: 0;
      font-size: (20 / @rootsize);
    }
  }
  .recovery-message{
    display: flex;
    margin: (15 / @rootsize) 0;
    width: (335 / @rootsize);
    
    input{
      flex: 1;
      border: 1px solid #ccc;
      
    }
    button{
      margin-left: (5 / @rootsize);
      width: (120 / @rootsize);
      background-color: #b0352f;
      color: #fff;
      border: none;
      border-radius: 5px;
    }
  }
  .recovery-btn{
    width: (335 / @rootsize);
    line-height: (44 / @rootsize);
    color: #fff;
    background-color: #b0352f;
    border-radius: 5px;
    text-align: center;
    font-size: (18 / @rootsize);
  }
  .tab{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: (10 / @rootsize);
    width: (335 / @rootsize);
    height: (44 / @rootsize);
    line-height: (44 / @rootsize);
      div{
        display: flex;
        align-items: center;
        height: (44 / @rootsize);
      }
        i{
          margin-right: (3 / @rootsize);
          font-size: (16 / @rootsize);
          color: #3c3c3c;
        }
        span{
          font-size: (13 / @rootsize);
        }
     
  }
}
//背景颜色
section::before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  z-index: -1;
}
</style>